<template>
  <div class="content">
    <div class="list">
      <!-- v-if="item.flag" -->
      <div class="listCon" @click="toBeNext(item)" v-for="(item, index) in list" v-show="item.flag" :key="index">
        <img :src="item.src" alt="">
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          type: 0,
          src: "/img/videoApproval/wait.png",
          name: "待处理",
          flag: false,
        },
        {
          type: 1,
          src: "/img/videoApproval/yichuli.png",
          name: "已处理",
          flag: false,
        },
        {
          type: 2,
          src: "/img/videoApproval/yifaqi.png",
          name: "已发起",
          flag: true,
        },
      ],
    };
  },
  mounted() {
    (async ()=>{
      let {data} = await this.get('/user/user');
      let role = data.userRoles;
      let bool = (role.some(item=>item.roleName == '备课组长'));
      if(bool){
        this.list[0].flag = true;
        this.list[1].flag = true;
      }else {
        this.list[0].flag = false;
        this.list[1].flag = false;
    }
    })()
    // var str = JSON.parse(localStorage.getItem("name"))[0].roleName;
    // // 包含返回  true
    // if (str.indexOf("备课组长") != -1) {
    //   this.list[0].flag = true;
    //   this.list[1].flag = true;
    // } else {
    //   this.list[0].flag = false;
    //   this.list[1].flag = false;
    // }
  },
  methods: {
    // 待处理
    toBeNext(data) {
      // 待处理
      if (data.type == 0) {
        this.$router.push({
          path: "/toBeProcessed",
          query: {
            type: "0",
            isShow: "1",
          },
        });
      }
      // 已处理
      if (data.type == 1) {
        this.$router.push({
          path: "/toBeProcessed",
          query: {
            type: "1",
            isShow: "0",
          },
        });
      }
      // 已发起
      if (data.type == 2) {
        this.$router.push({
          path: "/toBeProcessed",
          query: {
            type: "2",
            isShow: "0",
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-size: 0.1rem;
  .list {
    padding: 0.4rem 0.55rem 0;
    display: flex;
    .listCon {
      width: 1rem;
      text-align: center;
      margin-right: 0.8rem;
      img {
        width: 1rem;
        height: 1rem;
        vertical-align: top;
      }
      div {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4b4b4b;
        margin-top: 0.15rem;
      }
    }
  }
  .list .listCon:last-child {
    margin-right: 0;
  }
}
</style>